/**
* Created by youyaping on 2017/10/12.
*/

<template lang="pug">
  li.menu-item(@click="handleClick", @mouseup="handleMouseup($event)", :style="{backgroundColor: backgroundColor}", @mouseenter="handleMouseEnter", @mouseleave="handleMouseLeave")
    slot
</template>
<script>
  export default {
    name: 'ContextMenuItem',
    inject: ['rootMenu'],
    data() {
      return {
        backgroundColor: '#fff'
      }
    },
    props: {
      'hideOnSelect': {
        type: Boolean,
        default: true
      }
    },
    methods: {
      handleClick() {
        this.$emit('click')
      },
      handleMouseLeave() {
        this.backgroundColor = '#fff'
      },
      handleMouseEnter() {
        this.backgroundColor = this.rootMenu.hoverColor
      },
      handleMouseup(e) {
        if (!this.hideOnSelect || ((this.hideOnSelect === undefined) && !this.rootMenu.hideOnSelect)) {
          e.stopPropagation()
        }
      }
    }
  }

</script>
